<template>
	<view class="picker-w">
		<view class="title tn-flex tn-flex-col-center tn-flex-row-center">
			<view class="t1">{{selectPopTitle}}</view>
			<text class="t2" @click="confirm">保存</text>
		</view>
		<view class="list">
			<scroll-view scroll-y="true" class="scroll-view" scroll-with-animation @scroll="scroll"
				:scroll-top="scrollTop">
				<block v-for="(item,index) in newList" :key="index">
					<view class="list-item" :class="{'picth':currout == index}">{{item[keyName]}}</view>
				</block>
			</scroll-view>
			<view class="masking"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array
			},
			keyName:{
				type:String
			},
			selectPopTitle:{
				type:String,
				default:'项目分类'
			}
		},
		data() {
			return {
				currout: 2,
				scrollTop: uni.upx2px(100),
				newList:[]
			}
		},
		watch:{
			list:{
				handler(newVal, oldVal){
					this.newList = JSON.parse(JSON.stringify(newVal))
					this.newList.unshift('')
					this.newList.unshift('')
					this.newList.push('')
					this.newList.push('')
				},
				immediate:true
			}
		},
		mounted() {
			console.log('mounted')
		},
		methods: {
			scroll(e) {
				let num = e.detail.scrollTop / uni.upx2px(100)
				this.currout = Math.round(num) + 2
			},
			confirm(){
				let name = this.newList[this.currout]
				this.$emit('confirm',name)
				this.currout = 2
			}
		}
	}
</script>

<style lang="scss" scoped>

	.picker-w {
		background-color: #ffffff;

		.title {
			height: 125rpx;
			position: relative;

			.t1 {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.t2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);

			}
		}

		.list {
			height: 500rpx;
			position: relative;

			.scroll-view {
				height: 98%;
				padding-left: 30rpx;
				padding-right: 30rpx;
				position: absolute;
				top: 0;
				z-index: 1;

				.list-item {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;

				}

				.picth {
					color: #000000;
					font-weight: bold;

				}

			}

			.masking {
				height: 100rpx;
				background: #9D5EF4;
				border-radius: 20rpx;
				position: fixed;
				top: 320rpx;
				left: 30rpx;
				right: 30rpx;

			}
		}
	}
</style>
